<template>
    <div class="home" v-infinite-scroll="load" :infinite-scroll-immediate="false">
        <div class="jinage"></div>
        <div class="focus">
            <el-carousel trigger="click" height="8rem">
              <el-carousel-item v-for="item in focusData" :key="item">
                <img v-lazy="`http://47.105.157.158:3000/images/focus/${item}`">
              </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 精选 -->
        <div class="select-title">热门精选</div>
        <div class="select">
            
            <div class="select-wrap" v-if="flag">
                <div @click="jump(one)" class="select-item">
                    <img v-lazy="`http://47.105.157.158:3000/images/video/${one.imgs}`">
                </div>
                <div @click="jump(two)" class="select-item">
                    <img v-lazy="`http://47.105.157.158:3000/images/video/${two.imgs}`">
                </div>
                <div @click="jump(three)" class="select-item">
                    <img v-lazy="`http://47.105.157.158:3000/images/video/${three.imgs}`">
                </div>
            </div>
        </div>

        <!-- 视频列表 -->
        <div class="video-wrap" >
            <div :key="index" v-for="(item, index) in videoData" @click="jump(item)" class="video-item">
                <div class="item-title">
                    <img v-lazy="`http://47.105.157.158:3000/images/upload/${item.users.avatar}`">
                    <span class="username">{{item.users.userName}}</span>
                </div>
                <div class="video-img">
                    <img v-lazy="`http://47.105.157.158:3000/images/video/${item.imgs}`">
                    <span>{{item.times}}</span>
                </div>
                <div class="video-title">{{item.names}}</div>
                <div class="video-cz">
                    <i class="iconfont">&#xe73f;</i>
                    <span>{{item.dianzan}}</span>
                    <i class="iconfont comment">&#xe61e;</i>
                    <span>{{item.comments.length}}</span>
                </div>
            </div>

        </div>



    </div>
</template>

<script>
import axios from 'axios';
import { onMounted, ref, reactive, toRefs } from '@vue/composition-api';
export default {
    setup (props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getVideoCat();
            getFocusData();

            context.parent.$notify({
                title: '提示',
                message: '导航被版主隐藏在地址栏下面啦，轻点顶部左上角就可以显示啦',
                position: 'top-left'
            });
        }) 



        // 视频分类
        const videoCat = ref([]);
        // 获取视频分类
        const getVideoCat = async function () {
            let { data: res } = await axios.get('/video/video/cat');
            if (res.status != 200)
                return context.parent.$message.error('获取视频分类失败，请刷新后重试');
            videoCat.value = res.cat;
            context.parent.$nextTick(() => {
                getVideoData();
                getSelectData();
            })
        }

        const flag = ref(false);

        // 分类视频数据
        const videoData = ref([]);
        // 根据分类获取视频
        const getVideoData = async function () {
            let { data: res } = await axios.get(`/video/video/data/${'音MAD'}`);
            if (res.status != 200)
                return context.parent.$message.error('获取视频数据失败，请刷新后重试');
            videoData.value = res.data;
            
        }

        const selectDatas = reactive({
            one: null,
            two: null,
            three: null
        });

        const getSelectData = async function () {
            let { data: res1 } = await axios.get(`/video/video/data/${'音MAD'}`);
            if (res1.status != 200)
                return context.parent.$message.error('获取视频数据失败，请刷新后重试');
            selectDatas.one = res1.data[0];

            let { data: res2 } = await axios.get(`/video/video/data/${'鬼畜'}`);
            if (res2.status != 200)
                return context.parent.$message.error('获取视频数据失败，请刷新后重试');
            selectDatas.two = res2.data[0];
            selectDatas.three = res2.data[1];
            flag.value = true;
        }
        
        // 轮播图
        const focusData = ref(null);
        // 获取轮播图
        const getFocusData = async function () {
            let { data: res } = await axios.get('/get/focus');
            if (res.status != 200)
                return context.parent.$message.error('获取轮播图数据失败，请刷新重试');
            focusData.value = res.focus;
        }

        // 跳转
        const jump = function (item) {
            context.parent.$store.commit('setVideoData', item);
            context.parent.$router.push(`/privese/${item.names}`);
        }
        const flagIndex = ref(1);
        // 触底事件
        const load = async function () {
            if (flagIndex.value < videoCat.value.length) {
                let { data: res } = await axios.get(`/video/video/data/${videoCat.value[flagIndex.value]}`);
                if (res.status != 200)
                    return context.parent.$message.error('获取视频数据失败，请刷新后重试');
                videoData.value = [...videoData.value, ...res.data];
                flagIndex.value = flagIndex.value + 1;
            }
        }

        const methods = {  jump, load }
        return {
            ...methods,
            videoData,
            focusData,
            ...toRefs(selectDatas),
            flag
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    overflow: auto;
    padding-bottom: 1.333333rem;
}
img {
    width: 100%;
    height: 100%;
}

.select-title {
    margin-top: .666667rem;
    font-weight: 700;
    color:#262626;
}

.select {
    .select-wrap {
        display: flex;
        justify-content: space-between;
        margin-top: .666667rem;
        .select-item {
            width: 32%;
            img {
                height: 4rem;
            }
        }
    }
}

.video-title {
    height: 1.866667rem;
    line-height: 1.866667rem;
    font-size: .666667rem;
    color: #333;
    padding: 0 .266667rem;
}

.video-img {
    position: relative;
    span {
        position: absolute;
        right: .133333rem;
        top: .133333rem;
        padding: .133333rem .266667rem;
        background-color: rgba(0, 0, 0, .4);
        color: #b1bfce;
        font-weight: 700;
        letter-spacing: .053333rem;
        border-radius: .266667rem;
        font-size: .8rem;
        }
}

.video-item {
    border-bottom: .426667rem solid #f7f8f9;
    padding: .266667rem 0;
}

.video-wrap .video-item:nth-child(1) {
    border-top: .426667rem solid #f7f8f9;
}

.video-wrap {
    margin-top: 1.333333rem;
    .item-title {
        position: relative;
        height: 2.133333rem;
        img {
            position: absolute;
            width: 1.6rem;
            height: 1.6rem;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
        }
        .username {
            position: absolute;
            top: 50%;
            left: 2.133333rem;
            font-size: .8rem;
            color: #463d33;
            transform: translateY(-50%);
        }
    }
    .video-cz {
        padding: 0 .266667rem;
        i {
            font-size: .666667rem;
        }
        span {
            font-size: .666667rem;
            margin: 0 .266667rem;
        }
        .comment {
            margin-left: .266667rem;
        }
    }
}

</style>